<template>
  <van-nav-bar
    class="page-nav-bar"
    title="注册"
    left-text="返回"
    left-arrow
    @click-left="this.$router.push('/login')"
  />
  <div align="center" style="margin-top: 50px">
    <img width="90" height="90" src="../../assets/loginLogo.png" />
  </div>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-row>
        <van-col :span="2" offset="2">
          <van-icon name="manager" size="30px" />
        </van-col>
        <van-col :span="12">
          <van-field
            v-model="userName"
            name="姓名"
            placeholder="姓名"
            :rules="[{ required: true, message: '请填写姓名' }]"
          />
        </van-col>
      </van-row>

      <van-row>
        <van-col :span="2" offset="2">
          <van-icon name="phone" size="30px" />
        </van-col>
        <van-col :span="12">
          <van-field
            v-model="cell"
            name="手机号"
            placeholder="手机号"
            :rules="[
              { required: true, message: '请填写手机号' },
              { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！' },
            ]"
          />
        </van-col>
      </van-row>

      <van-row>
        <van-col :span="2" offset="2">
          <van-icon name="card" size="30px" />
        </van-col>
        <van-col :span="12">
          <van-field
            v-model="wxid"
            name="身份证号"
            placeholder="身份证号"
            :rules="[
              { required: true, message: '请填写身份证号' },
              {
                pattern:
                  /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                message: '身份证号码格式错误！',
              },
            ]"
          />
        </van-col>
      </van-row>

      <van-row>
        <van-col :span="2" offset="2">
          <van-icon name="lock" size="30px" />
        </van-col>
        <van-col :span="12">
          <van-field
            v-model="password"
            type="password"
            name="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-col>
      </van-row>

      <van-row>
        <van-col :span="2" offset="2">
          <van-icon name="lock" size="30px" />
        </van-col>
        <van-col :span="12">
          <van-field
            v-model="password2"
            type="password"
            name="密码"
            placeholder="确认密码"
            :rules="[{ required: true, message: '请再次填写密码' }]"
          />
        </van-col>
      </van-row>
    </van-cell-group>
    <van-field name="checkbox" :rules="[{ required: true, message: '请勾选' }]">
      <template #input>
        <van-checkbox v-model="checked" shape="round" icon-size="15px" />
        已阅读并同意
        <router-link to="/agreement1">服务条款</router-link>
        和
        <router-link to="/agreement2">隐私协议</router-link>
      </template>
    </van-field>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        注册
      </van-button>
    </div>
  </van-form>
</template>

<script>
import { reactive, toRefs } from 'vue';
import { register } from '../../api';
import { Toast, Dialog } from 'vant';
import { ref } from 'vue';
import router from '../../router'
function useSubmit(user) {
  const onSubmit = async () => {
    if (user.password === user.password2) {
      const res = await register(user);
      console.log(user);
      if (res.data.errCode == 0) {
        Toast.success('注册成功，请返回登录页进行登录！');
        router.push('login');
      } else {
        Dialog.alert({
          confirmButtonColor: '#3296fa',
          title: '注册失败',
          message:
            res.data.errMessage +
            '，请您重新注册,有任何疑问可以联系我们：李**电话：136********',
        })
          .then(() => {
            // on confirm 再试一次
          })
          .catch(() => {
            // on cancel 退出
          });
      }
    } else {
      // Notify({ type: 'warning', message: '密码不一致' });
      Toast.fail('密码不一致,请重新输入！');
    }
  };
  return {
    onSubmit,
  };
}

export default {
  setup() {
    const checked = ref(false);
    const groupChecked = ref([]);
    const user = reactive({
      userName: '',
      cell: '',
      wxid: '',
      password: '',
      password2: '',
    });
    return {
      ...toRefs(user),
      ...useSubmit(user),
      checked,
      groupChecked,
    };
  },
};
</script>

<style>
a:visited {
  color: #3296fa;
}
.page-nav-bar {
  background-color: #3296fa;
}
.page-nav-bar .van-nav-bar__title {
  color: #fff;
}
.page-nav-bar .van-icon {
  color: #fff;
}
</style>
